<template xmlns="http://www.w3.org/1999/html">
    <div>
        <Drawer title="员工" closable v-model="userModalVisible" width="70%">
            <Form ref="searchUserForm" :model="searchUserForm" inline :label-width="60" class="search-form">
                <Form-item label="姓名" prop="userName">
                    <Input type="text" v-model="searchUserForm.userName" clearable placeholder="请输入员工姓名" style="width: 200px"/>
                </Form-item>
                <Form-item label="入职时间">
                    <DatePicker v-model="searchUserForm.startDateE" type="daterange" format="yyyy-MM-dd" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px"></DatePicker>
                </Form-item>
                <Form-item label="部门" prop="deptIds">
                    <department-tree-choose width="200px" @on-change="handleSelectDepTree" ref="depTree"></department-tree-choose>
                </Form-item>
                <span v-if="drop">
                    <Form-item label="工号" prop="jobNo">
                        <Input type="text" v-model="searchUserForm.jobNo" clearable placeholder="请输入员工工号" style="width: 200px"/>
                    </Form-item>
                </span>
                <Form-item style="margin-left:-35px;" class="br">
                    <Button @click="handleSearchUser" type="primary" icon="ios-search">搜索</Button>
                    <Button @click="handleResetUser">重置</Button>
                    <a class="drop-down" @click="dropDown">{{dropDownContent}}
                        <Icon :type="dropDownIcon"></Icon>
                    </a>
                </Form-item>
            </Form>
            <Row class="operation">
                <Button @click="exportData" icon="md-paper">导出学员计划</Button>
            </Row>
            <br>
            <Table :loading="userLoading" border :columns="userColumns" :data="userData" ref="userTable"></Table>
            <Row type="flex" justify="end" class="code-row-bg page" style="margin: 10px 0;">
                <Page :current="searchUserForm.pageNumber" :total="totalUser" :page-size="searchUserForm.pageSize" @on-change="changeUserPage" @on-page-size-change="changeUserPageSize" :page-size-opts="[9,18,36]" size="small" show-total show-elevator show-sizer></Page>
            </Row>
        </Drawer>
    </div>
</template>

<script>
    import {getDepartment, getStaffData} from "@/api/bus";
    import departmentTreeChoose from "@/views/my-components/flyme/department-tree-choose";
    import Util from '@/libs/util';

    export default {
        name: "planStaff",
        components: {
            departmentTreeChoose
        },
        props: {
            buttonText: {
                type: String,
                default: "员工"
            },
            icon: {
                type: String,
                default: "md-person-add"
            },
            userType: ""
        },
        data() {
            return {
                userLoading: true,
                userModalVisible: false,
                drop: false,
                selectUsers: [],
                maskStyle: {
                    zIndex: 9999
                },
                dropDownContent: "展开",
                dropDownIcon: "ios-arrow-down",
                department: [],
                searchUserForm: {
                    deptIds: "",
                    jobNo: "",
                    planId: this.id,
                    userName: "",
                    userType: "UT_STUDENT",
                    type: "",
                    status: "",
                    startDateE: "",
                    startDate: "",
                    endDate: "",
                    pageNumber: 1, // 当前页数
                    pageSize: 9 // 页面大小
                },
                userColumns: [
                    {
                        type: "index",
                        align: "center"
                    },
                    {
                        title: "员工姓名",
                        key: "userName",
                        sortable: true
                    },
                    {
                        title: "头像",
                        key: "avatar",
                        align: "center",
                        render: (h, params) => {
                            return h("Avatar", {
                                props: {
                                    src: params.row.avatar
                                }
                            });
                        }
                    },
                    {
                        title: "昵称",
                        key: "nickName",
                        align: "center"
                    },
                    {
                        title: "所属部门",
                        key: "departmentTitle",
                        align: "center"
                    },
                    {
                        title: "手机",
                        key: "mobile",
                        sortable: true
                    },
                    {
                        title: "邮箱",
                        key: "email",
                        sortable: true
                    },
                    {
                        title: "完成度",
                        key: "degree",
                        sortable: true,
                        align: "center",
                        render: (h, params) => {
                            let re = params.row.degree + "%";
                            return h("div", re);
                        }
                    }
                ],
                userData: [],
                totalUser: 0,
                dictMessageType: []
            };
        },
        methods: {
            getDepartment() {
                getDepartment(0).then(res => {
                    this.loading = false;
                    if (res.status === true) {
                        this.department = res.data;
                    }
                });
            },
            handleSelectDepTree(v) {
                this.searchUserForm.deptIds = v;
                console.info(this.searchUserForm.deptIds)
            },
            userChoseClick() {
                this.getDictDataType();
                this.getUserDataList();
                this.getDepartment();
                this.userModalVisible = true
            },
            showDrawer(planId) {
                this.searchUserForm.planId = planId;
                this.userModalVisible = true;
                this.getUserDataList();
            },
            selectDateRange(v) {
                this.searchUserForm.startDate = v[0];
                this.searchUserForm.endDate = v[1];
            },
            handleSelectDep(v) {
                this.searchUserForm.deptIds = v;
            },
            changeUserPage(v) {
                this.searchUserForm.pageNumber = v;
                this.getUserDataList();
            },
            changeUserPageSize(v) {
                this.searchUserForm.pageSize = v;
                this.getUserDataList();
            },
            getUserDataList() {
                this.userLoading = true;
                getStaffData(this.searchUserForm).then(res => {
                    this.userLoading = false;
                    if (res.status === true) {
                        this.userData = res.data.rows;
                        this.totalUser = res.data.total;
                    }
                });
            },
            dropDown() {
                if (this.drop) {
                    this.dropDownContent = "展开";
                    this.dropDownIcon = "ios-arrow-down";
                } else {
                    this.dropDownContent = "收起";
                    this.dropDownIcon = "ios-arrow-up";
                }
                this.drop = !this.drop;
            },
            handleSearchUser() {
                this.searchUserForm.pageNumber = 1;
                this.searchUserForm.pageSize = 9;
                this.getUserDataList();
            },
            handleResetUser() {
                this.$refs.searchUserForm.resetFields();
                this.searchUserForm.pageNumber = 1;
                this.searchUserForm.pageSize = 9;
                this.$refs.dep.clearSelect();
                this.searchUserForm.departmentId = "";
                // 重新加载数据
                this.getUserDataList();
            },
            setSelectUser(v) {
                this.selectUsers = v;
                // this.$emit("on-change", this.selectUsers);
            },
            setSelectAllUser() {
                let data = [];
                this.userData.forEach(e => {
                    let u = {
                        id: e.id,
                        userName: e.userName
                    };
                    data.push(u);
                });
                this.selectUsers = data;
                this.$emit("on-change", data);
            },
            chooseUser(v) {
                // 去重
                let that = this;
                let flag = true;
                this.selectUsers.forEach(e => {
                    if (v.id == e.id) {
                        that.$Message.warning("已经添加过啦，请勿重复选择");
                        flag = false;
                    }
                });
                if (flag) {
                    let u = {
                        id: v.id,
                        userName: v.userName
                    };
                    this.selectUsers.push(u);
                    this.$emit("on-change", this.selectUsers);
                    this.$Message.success(`添加员工 ${v.userName} 成功`);
                }
            },
            clearSelectUser() {
                this.selectUsers = [];
                this.$emit("on-change", this.selectUsers);
            },
            handleCancelUser(e, id) {
                // 删除所选用户
                let newArray = [];
                this.selectUsers.forEach(e => {
                    if (id != e.id) {
                        newArray.push(e);
                    }
                });
                this.selectUsers = newArray;
                this.$emit("on-change", this.selectUsers);
                this.$Message.success("删除所选员工成功");
            },
            exportData() {
                window.location.href = Util.initUrl("/base/common/userPlanDownload", this.searchUserForm);
            },
        },
        created() {

        }
    };
</script>

<style lang="less">
    .clear {
        font-size: 12px;
        margin-left: 15px;
        color: #40a9ff;
        cursor: pointer;
    }

    .collapse {
        font-size: 12px;
        margin-top: 15px;
        width: 500px;
    }

    .select-count {
        font-size: 13px;
        font-weight: 600;
        color: #40a9ff;
    }

</style>

